<template>
  <van-nav-bar
    title="猫眼电影"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-image
    width="100%"
    height="2rem"
    fit="contain"
    src="https://img1.baidu.com/it/u=1949197425,1973696162&fm=253&fmt=auto&app=138&f=JPEG?w=1193&h=500
  "
  />
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit" to="content">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script>
import { ref, getCurrentInstance } from 'vue'
export default {
  setup() {
    const onClickLeft = () => history.back()
    const username = ref('')
    const password = ref('')
    const onSubmit = (values) => {
      console.log(values)
      const dint = getCurrentInstance()
      console.log(Json.parse(dint.data))
    }

    return {
      username,
      password,
      onSubmit,
      onClickLeft
    }
  }
}
</script>

<style lang="scss" scoped></style>
